<template>
<!-- 行业关联 -->
  <div>
    <el-popover
      placement="right"
      trigger="hover">
      <!-- 第二联 -->
        <el-row>
          <el-col :span="15">
            <ul>
              <div style="font-size: 15px;font-weight:bold;overflow-y:scroll" v-if="sourceData" v-for="(item,index) of sourceData"
                   :key="index">
                <p style="margin: 10px;font-weight: bold;font-size: 17px">{{item.title}}</p>
                <div style="line-height: 30px">
                  <span v-for="(row,rowIndex) of item.data" :key="rowIndex" @click="getName(row)"><a href="#"> &nbsp;&nbsp;{{row.name}} &nbsp;&nbsp;</a></span>
                </div>
              </div>
            </ul>
          </el-col>
          <div style ="border:1px solid;float:left;"></div>
          <el-col :span="8" v-if="guessLike.length > 0">
            <div style="text-align: center">
              <p style="text-align: center"> 猜你喜欢 </p>
              <el-row>
                <el-col :span="12" v-for="(item,index) of guessLike" :key="index">
                  <img :src="getBaseImagePath(item.path)" style="width: 100px;height: 100px;margin-left: 10px;margin-top:20px;object-fit:cover"/>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>

      <!-- 第一联 -->
      <el-row slot="reference">
        <el-col :span="24" >
          <ul>
            <div v-for="(item,index) of themeData.data" :key="index" style="line-height: 30px;font-size: 15px;">
              <li @mouseover="getNameMouseover(index)" :class="{rowStyle:backgroundColorIndex===index}"  @mouseleave="mouseLeave" style="width: 160px">
                <span v-if="item.data.length -3 >= 0" @click="getName(item.data[item.data.length -3])"> <a href="#">{{ item.data[item.data.length -3].name}} </a>  /  </span>
                <span v-if="item.data.length -2 >= 0" @click="getName(item.data[item.data.length -2])"> <a href="#">{{ item.data[item.data.length -2].name}} </a>  / </span>
                <span v-if="item.data.length - 1 >= 0" @click="getName(item.data[item.data.length -1])"> <a href="#">{{ item.data[item.data.length - 1].name}} </a> </span>
              </li>
            </div>
          </ul>
        </el-col>
      </el-row>

    </el-popover>
  </div>
</template>


<script>

  import BaseVue from '../../components/BaseVue'
  export default {
    name: 'ThemeLinkage',
    extends:BaseVue,
    props: {
      themeData: {
        data: null,

      },
    },
    computed: {
      sourceData: function () {
        return this.secondList
      },
      guessLike: function () {
        return this.guessLikeImage
      },
    },
    data() {
      return {
        secondList: {},
        guessLikeImage:[],
        backgroundColorIndex:''
      }
    },
    methods: {

      mouseLeave() {
        this.backgroundColorIndex = ''
      },

      getNameMouseover(val) {
        this.backgroundColorIndex = val;
        this.secondList = this.themeData.data[val].secondList;
        this.guessLikeImage = this.themeData.data[val].guessLike
      },

      getName(val) {
        console.log('name = ', val.name, 'id = ', val.id)
      },
    },
  }


</script>

<style scoped>
  .rowStyle{
    background-color:#f69c9f;
  }
</style>
